<template>
  <div class="essay-feedback">
    <el-card class="overall-score-card">
      <div slot="header">{{ essayForm.title }}</div>
      <div class="overall-score">
        <div class="circle-progress">
          <svg class="progress-ring">
            <circle class="progress-ring-circle" :stroke-dasharray="circumference + ' ' + circumference"
                    :style="{ strokeDashoffset: offset }" :r="radius" cx="50%" cy="50%" stroke-width="20" fill="transparent"></circle>
          </svg>
          <div class="score-text">{{ overallScore }}</div>
        </div>
      </div>
    </el-card>

    <el-card class="overall-comment-card">
      <div class="overall-comment">
        <p>{{ overallComment }}</p>
      </div>
    </el-card>

    <el-card class="aspect-card" v-for="(aspect, index) in aspects" :key="index" :header="aspect.title">
      <div class="aspect-feedback">
        <div class="aspect">
          <h3>打分</h3>
          <el-rate v-model="aspect.score" :max="5" :disabled="true" show-text></el-rate>
        </div>
        <div class="aspect">
          <h3>评价</h3>
          <p>{{ aspect.comment }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      essayForm: {
        title: '作文题目', // 作文题目
        content: '' // 作文内容
      },
      overallScore: 80, // 整体打分
      overallComment: '整体评价：很不错，内容充实，表达清晰，结构合理，建议继续保持！', // 整体评价
      aspects: [
        {
          title: '内容',
          score: 4,
          comment: '内容方面很丰富，但可能需要更深入的思考。'
        },
        {
          title: '表达',
          score: 3,
          comment: '表达清晰，但可以尝试更多的修辞手法。'
        },
        {
          title: '发展',
          score: 5,
          comment: '发展得不错，但可以更好地组织段落。'
        }
      ],
      radius: 50,
      circumference: 2 * Math.PI * 50,
      offset: 0
    };
  },
  mounted() {
    this.drawProgress();
  },
  methods: {
    drawProgress() {
      const progress = this.overallScore / 100;
      this.offset = this.circumference * (1 - progress);
    }
  }
};
</script>

<style scoped>
.essay-feedback {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
}

.el-card__header {
  font-weight: bold;
}

.overall-score {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.circle-progress {
  width: 120px;
  height: 120px;
  position: relative;
}

.progress-ring {
  width: 100%;
  height: 100%;
}

.progress-ring-circle {
  fill: transparent;
  stroke: #20a0ff;
}

.score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

.overall-comment p {
  margin: 0;
}

.aspect-feedback {
  display: flex;
  justify-content: space-between;
}

.aspect {
  width: calc(50% - 10px);
  text-align: center;
}

.aspect h3 {
  margin-bottom: 10px;
}
</style>
